<style scoped>
    .top{
        padding: 10px;
        background: rgba(0, 153, 229, .7);
        color: #fff;
        text-align: center;
        border-radius: 2px;
    }

    .clickable_icon{
        cursor:pointer
    }
    .float_right{
        float:right;
    }

    .clickable_icon:hover{
        font-weight: bold;
        font-size: large;
    }

    .col {
        padding-right:20px;
        padding-left:20px;
    }

</style>

<template>
    <div style="overflow-y:auto;padding-top:20px;padding-bottom:80px">
        <!-- <Row style="padding-bottom:10px">
            <i-col :xs="{span:24,offset:0}" :sm="{span:24,offset:0}" :md="{span:18,offset:3}" :lg="{span:18,offset:3}">
                
            </i-col>
        </Row> -->
        <Row>
            <i-col :xs="{span:24,offset:0}" :sm="{span:24,offset:0}" :md="{span:6}" :lg="{span:6}"
                class="col">
                <UserAvartar></UserAvartar>
                <br>
                <Project :project="project"></Project>
                <br>
            </i-col>
            <i-col :xs="{span:24,offset:0}" :sm="{span:24,offset:0}" :md="{span:12}" :lg="{span:12}" 
                class="col">
                <QuickAdd :edit="editData" @ok="postLog"></QuickAdd>
                <br>
                <Card>
                    <LogList></LogList>
                </Card>
                <br>
            </i-col>
            <i-col :xs="{span:24,offset:0}" :sm="{span:24,offset:0}" :md="{span:6}" :lg="{span:6}"
                class="col">
                <FriendLink style="width:100%" :links="friendLinks"></FriendLink>
                <br/>
                <LogRank></LogRank>
                <MyBackToTop ref="back-to-top" :height="100" :bottom="200">
                    <div class="top">返回顶端</div>
                </MyBackToTop>
            </i-col>
        </Row>
    </div>
    
</template>
<script>

    import moment from 'moment'
    import FriendLink from '../commons/friend-link'
    import UserAvartar from '../commons/user-avatar'
    import Project from '../commons/project'
    import LogRank from '../commons/log-rank'
    import LogList from '../commons/log-list'
    import QuickAdd from '../commons/quick-add'

    import MyBackToTop from '../commons/back-top'

    import { mapState, mapGetters, mapActions } from 'vuex'
    import _ from 'lodash'
    import Velocity from 'velocity-animate'


    export default {
        data(){
            return {
                
            }
        },
        computed: Object.assign({},
            mapState({
                'friendLinks':'friendLinks',
                'project':'project',
            }),{
                editData(){
                    return this.$store.state.editData
                }
            }
        ),
        methods:Object.assign(
            mapActions([
                'postLog',
            ]),
        ),
        mounted: function(){
            let scrollTarget = (this.$parent.$el.parentNode);
            this.$refs['back-to-top'].setTarget(scrollTarget);
        },
        components:{
            FriendLink,
            UserAvartar,
            Project,
            LogRank,
            MyBackToTop,
            LogList,
            QuickAdd
        }
    }
</script>
